<template>
  <div class="pageBox">
    <div class="top">
      <div class="topBg"></div>
      <img class="topTitle" src="@/image/home/topTitle.png" alt="" />
      <div class="swipeBox">
        <div ref="swiperContainer" class="swiper-container swiper-main">
          <div class="swiper-wrapper">
            <div
              :class="[
                item.status
                  ? 'swiper-slide my-swiper-slide my-swiper-slide-active'
                  : 'swiper-slide my-swiper-slide',
              ]"
              v-for="(item, index) in swiperData"
              :key="index"
            >
              <img
                :class="[item.status ? 'banner bannerActive' : 'banner']"
                :src="item.image"
                alt=""
              />
            </div>
          </div>
          <div ref="swiperPagination" class="swiper-pagination"></div>
        </div>
      </div>
    </div>

    <div class="content">
      <div class="noticeBox flex-between">
        <img class="noticeIcon" src="@/image/home/noticeIcon.png" alt="" />
        <div class="notice">
          <van-notice-bar left-icon="" :scrollable="false">
            <van-swipe
              vertical
              class="notice-swipe"
              :autoplay="3000"
              :show-indicators="false"
            >
              <van-swipe-item @click="goNoticeDetals">明月直入，无心可猜。今人不见古时月，今月曾经照古人。</van-swipe-item>
            </van-swipe>
          </van-notice-bar>
        </div>
        <img class="moreIcon" src="@/image/home/moreIcon.png" alt="" @click="$router.push('/notice')"/>
      </div>

      <div class="menu flex-between">
        <div
          class="menuItem flex-center"
          v-for="item in menuList"
          :key="item.id"
        >
          <img :src="item.image" alt="" />
          <p>{{ item.title }}</p>
        </div>
      </div>

      <div class="recommendBox">
        <div class="recommendTitle flex-between">
          <p>推荐商品</p>
          <img src="@/image/header/backIcon.png" alt="" />
        </div>

        <div class="goodsList flex-between">
          <div class="goodsItem" v-for="(item, index) in 3" :key="index" @click="goGoodsDetails">
            <img class="goodsIcon" src="@/image/header/backIcon.png" alt="" />
            <img class="hot" src="@/image/home/hot.png" alt="" />
            <div class="goodsTitle oneHidden">足银手镯</div>
            <div class="goodsPrice flex">
              <p>¥45</p>
              <del>¥120</del>
            </div>
          </div>
        </div>
      </div>

      <div class="exchangeBox">
        <div class="exchangeTitle flex-center">
          <img src="@/image/home/exchangeLeft.png" alt="" />
          <p>兑换专区</p>
          <img src="@/image/home/exchangeRight.png" alt="" />
        </div>

        <div class="goodsList flex-between">
          <div class="goodsItem" v-for="(item, index) in 6" :key="index" @click="goGoodsDetails">
            <img class="goodsIcon" src="@/image/header/backIcon.png" alt="" />
            <div class="goodsTitle oneHidden">足银手镯</div>
            <div class="goodsPrice flex">
              <p>¥45</p>
              <del>¥120</del>
            </div>
          </div>
        </div>
      </div>
    </div>

    <foot-component tab="0"></foot-component>
  </div>
</template>

<script type="text/ecmascript-6">
import { defineComponent, onMounted, ref } from "vue";
import Swiper from "../../assets/swiper/swiper.js";
import footComponent from "../../components/footComponent.vue";
import router from "../../router/index.js";

export default defineComponent({
  components: {
    footComponent,
  },
  setup() {
    const swiperContainer = ref(null);
    const swiperPagination = ref(null);
    const activeIndex = ref(0);
    const swiperData = ref([
      {
        sid: 1,
        image: require("../../image/home/banner.png"),
        status: true,
      },
      {
        sid: 2,
        image: require("../../image/home/banner.png"),
        status: false,
      },
      {
        sid: 3,
        image: require("../../image/home/banner.png"),
        status: false,
      },
    ]);
    const menuList = ref([
      {
        id: 0,
        title: "幸运抽奖",
        image: require("../../image/home/xingyunchoujiang_btn.png"),
        url: "",
      },
      {
        id: 1,
        title: "扫码支付",
        image: require("../../image/home/saomazhifu_btn.png"),
        url: "",
      },
      {
        id: 2,
        title: "邀请好友",
        image: require("../../image/home/yaoqinghaoyou_btn.png"),
        url: "",
      },
      {
        id: 3,
        title: "帮助中心",
        image: require("../../image/home/bangzhuzhongxin_btn.png"),
        url: "",
      },
    ]);
    function getSwiper() {
      new Swiper(swiperContainer.value, {
        pagination: {
          el: swiperPagination.value,
          clickable: true,
        },
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        loop: true,
        slidesPerView: 1.1,
        centeredSlides: true,
        spaceBetween: 5,
        preloadImages: true,
        updateOnImagesReady: true, //当所有的内嵌图像（img标签）加载完成后Swiper会重新初始化。使用此选项需要先开启preloadImages: true
        on: {
          slideChange: function () {
            // console.log("改变了，activeIndex为" + this.activeIndex);
            onChange(this.activeIndex);
          },
        },
      });
    }

    function onChange(activeIndex) {
      swiperData.value.forEach((item) => {
        item.status = false;
        if (item.sid == activeIndex) {
          item.status = true;
        }
      });
    }

    function goNoticeDetals() {
      router.push({
        path: "/noticeDetails",
      })
    }

    function goGoodsDetails() {
       router.push({
        path: "/goodsDetails",
      })
    }

    onMounted(() => {
      getSwiper();
    });

    return {
      activeIndex,
      swiperData,
      swiperContainer,
      swiperPagination,
      menuList,
      getSwiper,
      goNoticeDetals,
      goGoodsDetails,
    };
  },
});
</script>

<style scoped lang="less">
@import "../../assets/swiper/swiper.css";
.pageBox {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 136px;
  .top {
    width: 100%;
    height: 496px;
    position: relative;
    padding-top: 114px;
    .topBg {
      width: 100%;
      height: 420px;
      position: absolute;
      top: 0;
      left: 0;
      background: linear-gradient(360deg, #f50811 0%, #b30b11 100%);
      border-radius: 0 0 20% 20%;
      z-index: 1;
    }
    .topTitle {
      width: 206px;
      height: 38px;
      margin: 0 auto;
      display: block;
      position: relative;
      z-index: 2;
    }
    .swipeBox {
      height: 300px;
      margin-top: 44px;
      position: relative;
      .swiper-main {
        width: 100%;
        height: 300px;
      }
      :deep(.swiper-pagination-bullet) {
        width: 7px;
        height: 6px;
        background: #ffffff;
        opacity: 0.4;
        border-radius: 50%;
      }
      :deep(.swiper-pagination-bullet-active) {
        width: 26px;
        height: 7px;
        background: #ffffff;
        opacity: 1;
      }
      .my-swiper-slide {
        padding-top: 17px;
      }
      .my-swiper-slide-active {
        padding-top: 0;
      }

      .banner {
        width: 100%;
        height: 268px;
      }
      .bannerActive {
        height: 300px;
        box-shadow: 0px 4px 12px 0px rgba(223, 207, 207, 0.5);
      }
    }
  }
  .content {
    padding: 20px 30px 0;
    .noticeBox {
      width: 100%;
      height: 79px;
      background: #fbfbfb;
      box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.1);
      border-radius: 40px;
      padding: 0 20px;
      .noticeIcon {
        widows: 44px;
        height: 44px;
      }
      .moreIcon {
        widows: 40px;
        height: 40px;
      }
      .notice {
        width: 75%;
        .notice-swipe {
          height: 40px;
          line-height: 40px;
        }
        :deep(.van-notice-bar) {
          padding: 0;
          background: transparent;
        }
        :deep(.van-swipe-item) {
          width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 26px;
          font-weight: 400;
          color: #4d4d4d;
        }
      }
    }
    .menu {
      width: 100%;
      margin-top: 40px;
      .menuItem {
        flex-direction: column;
        justify-content: flex-start;
        img {
          width: 100px;
          height: 100px;
        }
        p {
          margin-top: 16px;
          font-size: 26px;
          font-weight: 400;
          color: #4d4d4d;
        }
      }
    }
    .goodsList {
      margin-top: 30px;
      flex-wrap: wrap;
      .goodsItem {
        width: 32%;
        border-radius: 16px;
        background: #ffffff;
        padding-bottom: 16px;
        margin-bottom: 15px;
        position: relative;
        .goodsIcon {
          width: 220px;
          height: 170px;
          border-radius: 16px 16px 0 0;
        }
        .hot {
          width: 64px;
          height: 30px;
          position: absolute;
          left: 0;
          top: 140px;
          z-index: 1;
        }
        .goodsTitle {
          font-size: 28px;
          font-weight: 500;
          color: #333333;
          padding: 10px 0 0 12px;
          width: 100%;
        }
        .goodsPrice {
          padding: 9px 0 0 12px;
          align-items: flex-end;
          p {
            font-size: 36px;
            font-weight: 500;
            color: #e00b12;
          }
          del {
            font-size: 22px;
            font-weight: 400;
            color: #b3b3b3;
            padding-bottom: 4px;
            padding-left: 10px;
          }
        }
      }
    }
    .recommendBox {
      margin-top: 50px;
      .recommendTitle {
        p {
          font-size: 30px;
          font-weight: 500;
          color: #333333;
        }
        img {
          width: 36px;
          height: 36px;
          transform: rotate(180deg);
        }
      }
    }
    .exchangeBox {
      margin-top: 25px;
      img {
        width: 16px;
        height: 24px;
      }
      p {
        font-size: 34px;
        font-weight: 500;
        color: #333333;
        padding: 0 16px;
      }
    }
  }
}
</style>
